<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#div1{ width:100%; height:auto; position:absolute; bottom:0; text-align:center;}
#div1 img{ width:64px;}
</style>
<script>

window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	var oDiv = document.getElementById('div1');
	var aImg = oDiv.getElementsByTagName('img');
	
	document.onmousemove = function(ev){
		
		var ev = ev || window.event;
		
		for(var i=0;i<aImg.length;i++){
			var x = aImg[i].offsetLeft + aImg[i].offsetWidth/2;
			var y = aImg[i].offsetTop + aImg[i].offsetHeight/2 + oDiv.offsetTop;
		
			var a = ev.clientX - x;
			var b = ev.clientY - y;
			
			var c = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));
			
			var scale  = 1 - c/300;
			
			if(scale < 0.5){
				scale = 0.5;
			}
			
			aInput[i].value = scale;
			
			aImg[i].style.width = scale * 128 + 'px';
			aImg[i].style.height = scale * 128 + 'px';
			
	}
		
	};
	
	
	
	
};

</script>
</head>

<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<div id="div1">
	<img src="images/1.png">
    <img src="images/2.png">
    <img src="images/3.png">
    <img src="images/4.png">
    <img src="images/5.png">
</div>
</body>
</html>
